import { reactive } from "@vue/runtime-core"

const colorsMap = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"]

export const chart1Option = reactive({
    color: ['#2f89cf'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        },
    },
    grid: {
        left: '0%',
        top: '10px',
        right: '0%',
        bottom: '4%',
        containLabel: true,
    },
    xAxis: [
        {
            type: 'category',
            data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],
            axisTick: {
                alignWithLabel: true,
            },
            axisLabel: {
                color: 'rgba(255, 255, 255, .6)',
                fontSize: 12,
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(255, 255, 255, .1)',
                    width: 1,
                    type: 'solid',
                },
            },
        },
    ],
    yAxis: [
        {
            type: 'value',
            axisLabel: {
                color: 'rgba(255, 255, 255, .6)',
                fontSize: 12,
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, .1)',
                    width: 1,
                    type: 'solid',
                },
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, .1)'
                }
            }
        },
    ],
    series: [
        {
            name: '直接访问',
            type: 'bar',
            barWidth: '35%',
            itemStyle: {
                borderRadius: 5
            },
            data: [200, 300, 300, 900, 1500, 1200, 600],
        },
    ],
})
export const chart2Option = reactive({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '22%',
        top: '10%',
        bottom: '10%',
    },
    xAxis: {
        show: false
    },
    yAxis: [
        {
            type: 'category',
            axisLine: false,
            axisTick: false,
            inverse: true,
            data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
            axisLabel: {
                color: '#fff',
            },
        },
        {
            axisLine: false,
            axisTick: false,
            inverse: true,
            data: [702, 350, 610, 793, 664],
            axisLabel: {
                color: '#fff',
                fontSize: 12
            }
        }
    ],
    series: [
        {
            name: '条',
            type: 'bar',
            data: [70, 34, 60, 78, 69],
            barCategoryGap: 50,
            barWidth: 10,
            itemStyle: {
                borderRadius: 20,
                color: (params) => {
                    return colorsMap[params.dataIndex % 5]
                }
            },
            label: {
                show: true,
                color: '#fff',
                position: 'inside',
                formatter: '{c}%'
            },
            yAxisIndex: 0,
        },
        {
            name: '框',
            type: 'bar',
            data: [100, 100, 100, 100, 100],
            barCategoryGap: 50,
            barWidth: 16,
            itemStyle: {
                color: 'none',
                borderRadius: 20,
                borderWidth: 3,
                borderColor: '#00c1de'
            },
            label: {
                // show: true,

            },
            yAxisIndex: 1
        }
    ]
})
export const chart3Option = reactive({

})
export const chart4Option = reactive({

})
export const chart5Option = reactive({

})
export const chart6Option = reactive({

})